/*
 * @Description:图片懒加载
 * @Author: r_yuesheng
 * @Date: 2022-04-11 20:14:53
 * @LastEditTime: 2022-04-11 20:30:44
 * @LastEditors: r_yuesheng
 */
import React, { Component } from 'react';
import LazyLoad from 'react-lazyload';

class lazyloadImg extends Component {
  constructor(props) {
    super(props);
    this.state = {
      imgArr: [
        'https://gimg2.baidus.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652254777&t=514189daf55f123f5769ce2eaf8fb343',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F00583a5217aa3497e2a43c7573e1b275a05aecd42d88c-HKFYQm_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652254829&t=219f3324d04f5093ff83f4450d15b8aa',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi-1.lanrentuku.com%2F2020%2F7%2F11%2Fe23bfa96-6f7c-4c05-b4e7-0ee93d656d9f.jpg&refer=http%3A%2F%2Fi-1.lanrentuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652254855&t=0ce075516de0aa893e2531ff162d00b9',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZP044191A4-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652254874&t=5bc9d5b12c2bf52fbeac411a7c01f7eb',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652254777&t=514189daf55f123f5769ce2eaf8fb343',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F00583a5217aa3497e2a43c7573e1b275a05aecd42d88c-HKFYQm_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652254829&t=219f3324d04f5093ff83f4450d15b8aa',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fi-1.lanrentuku.com%2F2020%2F7%2F11%2Fe23bfa96-6f7c-4c05-b4e7-0ee93d656d9f.jpg&refer=http%3A%2F%2Fi-1.lanrentuku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652254855&t=0ce075516de0aa893e2531ff162d00b9',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZP044191A4-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652254874&t=5bc9d5b12c2bf52fbeac411a7c01f7eb'
      ]
    };
  }
  render() {
    return (
      <div>
        {this.state.imgArr.map((item, key) => {
          return (
            <LazyLoad height={200} key={key} scroll={true} scrollContainer="">
              <img
                height={200}
                src={item}
                onError={e => {
                  e.target.onerror = null;
                  e.target.src =
                    'https://img-blog.csdnimg.cn/20210708191452946.png?x-oss-process=image/resize,m_fixed,h_224,w_224';
                }}
              />
            </LazyLoad>
          );
        })}
      </div>
    );
  }
}

export default lazyloadImg;
